<template>
	<view class="container">
		<view class="search-bar">
			<input class="search-input" type="text" placeholder="请输入搜索内容" />
		</view>
		<view class="content">
			<view class="left-menu">
				<view class="menu-item selected">全部</view>
				<view class="menu-item">按摩</view>
				<view class="menu-item">艾灸</view>
				<view class="menu-item">耳穴</view>
				<view class="menu-item">正骨</view>
			</view>
			<view class="right-content">
				<view class="service-item" v-for="(item, index) in services" :key="index">
					<image class="service-image" :src="item.image"></image>
					<view class="service-info">
						<text class="service-name">{{ item.name }}</text>
						<view class="service-details">
							<text class="service-duration">{{ item.duration }}</text>
							<text class="service-frequency">{{ item.frequency }}</text>
						</view>
						<text class="service-price">¥{{ item.price }}</text>
						<view class="quantity-control">
							<button class="quantity-button" @click="decreaseQuantity(index)">-</button>
							<text class="quantity">{{ item.quantity }}</text>
							<button class="quantity-button" @click="increaseQuantity(index)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<text class="total">合计 {{ totalQuantity }} 项服务</text>
			<button class="select-button">选择服务</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				services: [{
						image: '/static/logo.png',
						name: '艾灸',
						duration: '60分钟',
						frequency: '每周1-2次',
						price: 598,
						quantity: 1
					},
					{
						image: '/static/logo.png',
						name: '耳穴治疗',
						duration: '60分钟',
						frequency: '每周1-2次',
						price: 598,
						quantity: 0
					},
					{
						image: '/static/logo.png',
						name: '按摩推拿',
						duration: '60分钟',
						frequency: '每周1-2次',
						price: 598,
						quantity: 0
					},
				]
			};
		},
		computed: {
			totalQuantity() {
				return this.services.reduce((total, service) => total + service.quantity, 0);
			}
		},
		methods: {
			increaseQuantity(index) {
				this.services[index].quantity++;
			},
			decreaseQuantity(index) {
				if (this.services[index].quantity > 0) {
					this.services[index].quantity--;
				}
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		height: 100vh;
	}

	.search-bar {
		display: flex;
		justify-content: center;
		padding: 10px 20px;
	}

	.search-input {
		width: 100%;
		padding: 5px 10px;
		border: 1px solid #eee;
		border-radius: 4px;
	}

	.content {
		display: flex;
		flex: 1;
	}

	.left-menu {
		width: 80px;
		background-color: #f5f5f5;
	}

	.menu-item {
		padding: 15px 10px;
		cursor: pointer;
	}

	.menu-item.selected {
		background-color: #c1a261;
		color: white;
	}

	.right-content {
		flex: 1;
		padding: 10px 20px;
	}

	.service-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}

	.service-image {
		width: 60px;
		height: 60px;
		margin-right: 20px;
	}

	.service-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.service-name {
		font-size: 16px;
		color: #000;
		margin-bottom: 5px;
	}

	.service-details {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
	}

	.service-price {
		font-size: 16px;
		color: #c1a261;
	}

	.quantity-control {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.quantity-button {
		background-color: #c1a261;
		color: #fff;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
	}

	.quantity {
		margin: 0 10px;
		font-size: 16px;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		border-top: 1px solid #eee;
	}

	.total {
		font-size: 16px;
	}

	.select-button {
		background-color: #c1a261;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
	}
</style>